<template>
  <page-view>
<!--    <Chart id="myChart" ref="echarts"  style="width: 100%; height: 500px" :option="chartOption" />-->
    <div id="map" style="width: 100%; height: 800px" ></div>
  </page-view>

</template>

<script>
import axios from "axios";
import * as echarts from 'echarts'
import PageView from "@/components/Page/page-view-copy";

// 地图分布图
export default {
  name: "map-chart",
  components: {PageView},
  data() {
    return {
      chartOption:{}
    }
  },
  mounted() {
    let mapChart = echarts.init(document.getElementById('map'));
    // let dom = document.getElementById('chartOption')
    axios.get('/GEO.json').then(res => {
      console.log('城市数据：', res.data)
      echarts.registerMap('HK', res.data)
      this.chartOption = {
        // 标题配置
        title:{
          text:'城市数据',
          subtext:'副标题',
          sublink:'http://www.baidu.com',
        },

        // 点击某一项弹层气泡
        tooltip: {
          show: true,
          trigger:'item',
          // 显示格式化 b为名称 c为对应值
          formatter:'{b}<br/>{c}'
        },

        // 右侧工具栏：数据视图 还原
        toolbox: {
          show: true,
          orient: 'vertical',
          left: 'right',
          top: 'center',
          feature: {
            dataView: { readOnly: false },
            restore: {},
            saveAsImage: {}
          }
        },

        // 设置地图内部的颜色
        visualMap: {
          min: 800,
          max: 50000,
          text: ['High', 'Low'],
          realtime: false,
          calculable: true,
          inRange: {
            color: ['lightskyblue', 'yellow', 'orangered']
          }
        },
        // 设置地图的大小，宽高
        // geo: {
        //   show: true,
        //   // 说明要设置的地图名称
        //   map: 'HK',
        //   // 设置大小
        //   // zoom: 1.2,
        //   top: '90px',
        //   // 设置宽高
        //   // aspectScale: 1.2,
        //   // 设置外部地图的样式
        //   itemStyle: {
        //     normal: {
        //       areaColor: 'transparent',
        //       borderColor: '#3fdaff',
        //       borderWidth: 2,
        //     },
        //   }
        // },

        // 数据源
        series: [{
          name:'福建省各地区对应数据',
          type: 'map',
          map: 'HK',
          label:{
            // 控制是否显示各标注名称
            show:false,
            // 各标注名称字体颜色
            color: 'red'
          },
          // 可缩放
          roam: true,
          // 名称要对应
          data: [
            { name: '中西区', value: 20057.34 },
            { name: '湾仔', value: 15477.48 },
            { name: '东区', value: 31686.1 },
            { name: '南区', value: 6992.6 },
            { name: '油尖旺', value: 44045.49 },
            { name: '深水埗', value: 40689.64 },
            { name: '九龙城', value: 37659.78 },
            { name: '黄大仙', value: 45180.97 },
            { name: '观塘', value: 55204.26 },
            { name: '葵青', value: 21900.9 },
            { name: '荃湾', value: 4918.26 },
            { name: '屯门', value: 5881.84 },
            { name: '元朗', value: 4178.01 },
            { name: '北区', value: 2227.92 },
            { name: '大埔', value: 2180.98 },
            { name: '沙田', value: 9172.94 },
            { name: '西贡', value: 3368 },
            { name: '离岛', value: 806.98 }
          ],

          // 自定义名称映射
          nameMap: {
            'Central and Western': '中西区',
            Eastern: '东区',
            Islands: '离岛',
            'Kowloon City': '九龙城',
            'Kwai Tsing': '葵青',
            'Kwun Tong': '观塘',
            North: '北区',
            'Sai Kung': '西贡',
            'Sha Tin': '沙田',
            'Sham Shui Po': '深水埗',
            Southern: '南区',
            'Tai Po': '大埔',
            'Tsuen Wan': '荃湾',
            'Tuen Mun': '屯门',
            'Wan Chai': '湾仔',
            'Wong Tai Sin': '黄大仙',
            'Yau Tsim Mong': '油尖旺',
            'Yuen Long': '元朗'
          },

          // 缩放比例
          zoom:1,
        }]
      }
      mapChart.setOption(this.chartOption)
    }).catch(err => {

    })

    // 监听地图的缩放事件
    const _this = this;
    mapChart.on('georoam', function (params) {
      console.log('params:',  params)
      if (params && params.zoom) {
        const seriesObj = mapChart.getOption().series[0]
        const zoom = seriesObj.zoom
        console.log('地图缩放比例:', zoom)
        if (zoom >= 1) {
          // 缩放比例大于1 才显示各标注名称
          seriesObj.label.show = true
        } else  {
          seriesObj.label.show = false
        }

        // 重新设置map配置项
        const options = _this.chartOption
        options.series[0] = seriesObj;
        mapChart.setOption(options)

        // 这里可以执行缩放时的回调逻辑 - 老版本echart使用
        let geo = mapChart.getOption()  && mapChart.getOption().geo ? mapChart.getOption().geo  : []
        if (geo && geo.length > 0) {
          console.log('地图缩放比例:', mapChart.getOption().geo[0].zoom);
        }
      }
    });
  }
}
</script>

<style scoped>

</style>
